 /**
 * 描述：map modal层
 */
<style lang="scss" scoped>
    $modal-bg: #f7f7f7;
    $modal-color: #5f5d5c;
    $border-radius: 3px;

    .map-modal {
        position: fixed;
        z-index: 1010;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        .modal-dialog {
            position: absolute;
            z-index: 2001;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            background: rgba(0, 0, 0, 0.4);
        }
        .map-modal-wrap {
            position: absolute;
            z-index: 2002;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow-y: hidden;
            &.map-modal--scroll {
                overflow-y: auto;
            }
        }
        .map-modal-dialog {
            position: absolute;
            top: 15%;
            left: 0;
            right: 0;
            margin: 0 auto 30px;
            &.map-modal--tiny {
                width: 30%;
            }
            &.map-modal--small {
                width: 40%;
            }
            &.map-modal--normal {
                width: 50%;
            }
            &.map-modal--big {
                width: 60%;
            }
            &.map-modal--large {
                width: 70%;
            }
            .map-modal-content {
                border-radius: $border-radius;
                background: #FFFFFF;
                overflow: hidden;
                .map-modal-header {
                    padding: 12px 15px;
                    font-size:14px;
                    font-family:MicrosoftYaHei;
                    color:rgba(43,38,38,1);
                    background: $modal-bg;
                    .tip {
                      margin-right: 10px;
                      margin-top: 7px;
                      float: left;
                      display:block;
                      background:#f00;
                      border-radius:50%;
                      width:8px;
                      height:8px;
                    }
                    button.close {
                        -webkit-appearance: none;
                        padding: 0;
                        cursor: pointer;
                        background: 0 0;
                        border: 0;
                        float: right;
                        font-size: 24px;
                        font-weight: 700;
                        line-height: 1;
                        margin-top: 2px;
                        color: #dc352f;
                        text-shadow: 0 1px 0 rgba(0, 0, 0, 0.8);
                        filter: alpha(opacity=20);
                        opacity: .6;
                        &:focus, &:hover {
                            color: #de605b;
                            text-decoration: none;
                            cursor: pointer;
                            filter: alpha(opacity=80);
                            opacity: .8;
                            outline: none;
                        }
                        span {
                            font-size: 24px;
                        }
                    }
                }
                .map-modal-body {
                    &.has-padding {
                        padding: 10px 15px;
                        max-height: 700px;
                        overflow-y: auto;
                    }
                  .map-height {
                    height: 500px;
                  }
                  .search-bar{
                    position: absolute;
                    top: 60px;
                    left: 35px;
                    background-color: rgba(55,55,55,.1);
                    height: 50px;
                    width: 90%;
                    line-height: 50px;
                  }
                }
                .map-modal-footer {
                    padding: 10px 15px 15px;
                }
            }
        }
    }
  .btn {
    display: inline-block;
    margin-bottom: 0;
    font-weight: 400;
    text-align: center;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    white-space: nowrap;
    line-height: 1.5;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding: 6px 15px;
    font-size: 12px;
    border-radius: 4px;
    transform: translate3d(0,0,0);
    transition: color .2s linear,background-color .2s linear,border .2s linear;
    color: #657180;
  }
</style>
<template>
    <transition name="zoomDown">
        <div :class="[customClass]" v-show="value">
            <div :class="classed" @click.self="handlerModal()">
                <transition :name="transition">
                    <div :class="classes" v-show="isActive" :style="styles">
                        <div :class="[`${customClass}-content`]">
                            <div :class="[`${customClass}-header`]">
                                <i class="tip"></i>{{title}}
                                <button type="button" class="close" v-if="closable" data-dismiss="modal" aria-label="Close" @click="handlerCancel()">
                                    <span aria-hidden="true">×</span>
                                </button>
                            </div>
                            <div :class="bodyClasses">
                              <div class="map-height" id="selectMap"></div>
                              <div class="search-bar">
                                <div style="clear: both;height: 40px; float: left;width: 70%;">
                                  <el-select
                                    style="width: 100%;margin-left: 20%"
                                    v-model="searchData.selectAddress"
                                    filterable
                                    remote
                                    reserve-keyword
                                    placeholder="请输入地址关键词"
                                    :remote-method="addressBlur"
                                    @change="addressChange"
                                    :loading="searchData.loading">
                                    <el-option
                                      v-for="(item, index) in searchData.locationArray"
                                      :key="index"
                                      :label="item.name"
                                      :value="item.name">
                                    </el-option>
                                  </el-select>
                                </div>
                                <div class="clear"></div>
                              </div>
                            </div>
                            <div :class="[`${customClass}-footer`]" style="float: right">
                                <!--<slot name="footer"></slot>-->
                              <button class="btn" @click.self="handlerCancel()">确定</button>
                            </div>
                            <div class="clear"></div>
                        </div>
                    </div>
                </transition>
            </div>
            <!-- 遮罩层 -->
            <div class="modal-dialog" v-if="modalAble" @click.self="handlerModal()"></div>
        </div>
    </transition>
</template>
<script>
    import $ from 'jquery';
    import AMap from 'AMap';
    import map from '@/js/mixins/map';
    const prefixCls = 'map-modal';
    function oneOf (val, arr) {
        let item = arr.filter(item => item === val);
        return !!item.length;
    }
    export default {
        mixins: [map],
        name: 'mapModal',
        data () {
            return {
              isActive: false,
              searchData: {
                selectAddress: null,
                loading: false,
                locationArray: [],
                lng: null,
                lat: null
              }
            };
        },
        props: {
            cityCode: Number,
            title: String,
            size: {
                validator (val) {
                    return oneOf(val, ['tiny', 'small', 'normal', 'big', 'large']);
                },
                default: 'small'
            },
            customClass: {
                type: String,
                default: prefixCls
            },
            scrollAble: {
                type: Boolean,
                default: true
            },
            closable: {
                type: Boolean,
                default: true
            },
            transition: {
                type: String,
                default: 'fade'
            },
            modalAble: {
                type: Boolean,
                default: true
            },
            hasPadding: {
                type: Boolean,
                default: true
            },
            modalCloseAble: {
                type: Boolean,
                default: true
            },
            value: Boolean,
            styles: {
                type: Object,
                default () {
                    return {};
                }
            }
        },
        computed: {
            classed () {
                return [
                    `${prefixCls}-wrap`,
                    {
                        [`${prefixCls}--scroll`]: this.scrollAble
                    }
                ];
            },
            classes () {
                return [
                    `${prefixCls}-dialog`,
                    {
                        [`${prefixCls}--${this.size}`]: !!this.size
                    }
                ];
            },
            bodyClasses () {
                return [
                    `${prefixCls}-body`,
                    {
                        'has-padding': this.hasPadding
                    }
                ];
            },
            showFooter () {
                return this.$slots.footer !== undefined;
            }
        },
        watch: {
            value (val) {
                this.isActive = val;
                if (!val) {
                    this.$emit('close');
                }
            }
        },
        async mounted () {
            await this._initMap('selectMap', 10);
            this.$nextTick(() => {
                this.isActive = this.value;
                this.map.on('click', (e) => {
                  this.clickMap(e.lnglat.getLng(), e.lnglat.getLat());
                });
            });
        },
        methods: {
            handlerClose () {
                this.$emit('input', false);
            },
            handlerCancel () {
              this.$emit('getLngLat', {lng: this.searchData.lng, lat: this.searchData.lat});
              this.handlerClose();
            },
            // 确定选择
            handlerConfirm () {
              this.$emit('getLngLat', {lng: this.searchData.lng, lat: this.searchData.lat});
              this.handlerClose();
            },
            handlerModal () {
                if (this.modalCloseAble) {
                    this.handlerClose();
                }
            },
          // 地址发生改变时
          addressChange (val) {
            if (!val) return;
            let addressobject = this.searchData.locationArray.find(item => item.name === val);
            let locationArray = addressobject.location.split(',');
            this.addMarker(locationArray);
          },
          // 根据地址查询经纬度
          addressBlur (query) {
            this.searchData.loading = true;
            let apiConv = `http://restapi.amap.com/v3/place/text` +
              `?key=09fc21a01b861edccad8027462452966` +
              `&keywords=${query}` +
              `&city=${this.cityCode}` +
              `&children=1&offset=20&page=1&extensions=all`;
            $.getJSON(apiConv, (data) => {
              this.searchData.loading = false;
              if (data.status === 0) {
                this.$Notice.info({title: '检索地址失败，请重新输入地址'});
                return;
              }
              let result = data.pois;
              this.searchData.locationArray = result;
            });
          },
          // 地图点击事件
          clickMap (lng, lat) {
            this.searchData.lng = lng;
            this.searchData.lat = lat;
            this.addMarker([lng, lat]);
          },
          // 地图添加maker
          async addMarker (position) {
            this.map.clearMap();
            this.map.panTo(position);
            this.map.setZoom(13);
            let marker = null;
            marker = new AMap.Marker({
              map: this.map,
              position: position,
              autoRotation: true
            });
            return marker;
          }
        }
    };
</script>
